<template>
    <div>
        <!-- 首页轮播图 -->
        <Carousel />
        <!-- 首页搜索医院的表单区 -->
        <Search />
        <!-- 首页底部展示医院的结构 -->
        <el-row >
            <el-col :span="20">
                <!-- 医院分类 -->
                <Sort @getHostype="getHostype" @getDistrictCode="getDistrictCode" />
                <!-- 医院卡片 -->
                <div v-if="hasHospitalArr.length" class="hospital">
                    <Card class="item" v-for="item in hasHospitalArr" :key="item.id" :hospitalInfo="item" />
                </div>
                <!-- 空位图片 -->
                <el-empty v-else description="没有符合要求的医院" />
                <!-- 分页器 -->
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                    :background="true" layout=" prev, pager, next, jumper,->,sizes,total" :total="total"
                    @current-change="currentChange" @size-change="sizeChange" />
            </el-col>
            <el-col :span="4">
                <Tip />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang='ts'>
defineOptions({
    name: "Home",
})
// 引入首页轮播图组件
import Carousel from '@/pages/home/carousel/index.vue'
// 引入首页搜索组件
import Search from "@/pages/home/search/index.vue"
// 引入医院分类组件
import Sort from "@/pages/home/sort/index.vue"
// 引入医院列表组件
import Card from "@/pages/home/card/index.vue"
// 引入右侧结构
import Tip from "@/pages/home/tip/index.vue"

// 引入封装好的 api 
import { reqHospital } from "@/api/home"

// 引入数据类型
import type { Content, HospitalResponseData } from "@/api/home/type"

// 引入 vue 中的组件
import { ref, onMounted } from "vue"

// 分页器页码
let pageNo = ref<number>(1);
// 一页展示几条数据
let pageSize = ref<number>(10);
// 已有的医院数据
let hasHospitalArr = ref<Content>([]);
// 已有医院总个数
let total = ref<number>(0);
// 医院等级
let hostype = ref<string>('');
// 医院地区
let districtCode = ref<string>('');

// 获取已有医院的数据
const getHospitalInfo = async () => {

    // 获取医院的数据
    let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value);
    if (result.code === 200) {
        // 存储获取的医院数据
        hasHospitalArr.value = result.data.content;
        // 存储医院的总个数
        total.value = result.data.totalElements;
    }
}
// 分页器页码发生变化时的回调
function currentChange() {
    // 获取已有医院的数据
    getHospitalInfo();
}
// 分页器下拉菜单发生变化时的回调
function sizeChange() {
    // 获取已有医院的数据
    getHospitalInfo();
}
// 子组件自定义事件：获取 Sort 传递的参数（子传父）
const getHostype = (level: string) => {
    hostype.value = level;
    // 再次发请求
    getHospitalInfo();
}
const getDistrictCode = (region: string) => {
    districtCode.value = region;
    // 再次发请求
    getHospitalInfo();
}

// 组件挂载完毕，发一次请求
onMounted(() => {
    getHospitalInfo();
})

</script>

<style lang="scss" scoped>
.hospital {
    display: flex;
    flex-wrap: wrap;
    // space-evenly:主轴方向每个元素之间的间隔相等
    // space-around:主轴方向每个元素周围的区域相等
    justify-content: space-between;

    .item {
        width: 48%;
        margin: 10px 0;
    }
}
</style>